import 'package:flutter/material.dart';

class RegisterPage extends StatefulWidget {
  @override
  _RegisterPageState createState() => _RegisterPageState();
}

class _RegisterPageState extends State<RegisterPage> {
//  final FirebaseAuth firebaseAuth = FirebaseAuth.instance;
  final _formKey = GlobalKey<FormFieldState>();
//  UserServices _userServices = UserServices();
  TextEditingController _email = TextEditingController();
  TextEditingController _password = TextEditingController();
  TextEditingController _name = TextEditingController();
  TextEditingController _confirmPassword = TextEditingController();
  String gender;
  String groupvalue = "Male";
  bool hidePass = true;
  bool hidePass1 = true;
  bool loading = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(children: <Widget>[
        Image.asset(
          'images/back1.webp',
          fit: BoxFit.fill,
          width: double.infinity,
          height: double.infinity,
        ),
//            Container(
//              alignment: Alignment.topRight,
//              child: Image.asset('images/logo.png'),
//              width: 240.0,
//              height: 200.0,
//            ),
        Container(
          color: Colors.black12.withOpacity(0.4),
          width: double.infinity,
          height: double.infinity,
        ),
        Center(
          child: Padding(
            padding: const EdgeInsets.only(top: 150.0),
            child: Center(
              child: Form(
                  key: _formKey,
                  child: ListView(
                    children: <Widget>[
                      Padding(
                        padding:
                        const EdgeInsets.fromLTRB(14.0, 4.0, 14.0, 4.0),
                        child: Material(
                          borderRadius: BorderRadius.circular(10.0),
                          color: Colors.white.withOpacity(0.8),
                          elevation: 0.0,
                          child: Padding(
                            padding: const EdgeInsets.only(left: 12.0),
                            child: TextFormField(
                              controller: _name,
                              decoration: InputDecoration(
                                border: InputBorder.none,
                                hintText: "Full Name",
                                icon: Icon(Icons.person),
                              ),
                              validator: (value) {
                                if (value.isEmpty) {
                                  return "The name field cannot be empty";
                                }
                                return null;
                              },
                            ),
                          ),
                        ),
                      ),
                      Padding(
                        padding:
                        const EdgeInsets.fromLTRB(14.0, 4.0, 14.0, 4.0),
                        child: new Container(
                          color: Colors.white.withOpacity(0.2),
                          child: Row(
                            children: <Widget>[
                              Expanded(
                                  child: ListTile(
                                    title: Text(
                                      "Male",
                                      textAlign: TextAlign.end,
                                      style: TextStyle(color: Colors.white),
                                    ),
                                    trailing: Radio(
                                        value: "Male",
                                        groupValue: groupvalue,
                                        onChanged: (e) => valueChanged(e)),
                                  )),
                              Expanded(
                                  child: ListTile(
                                    title: Text(
                                      "Female",
                                      textAlign: TextAlign.end,
                                      style: TextStyle(color: Colors.white),
                                    ),
                                    trailing: Radio(
                                        value: "Female",
                                        groupValue: groupvalue,
                                        onChanged: (e) => valueChanged(e)),
                                  )),
                            ],
                          ),
                        ),
                      ),
                      Padding(
                        padding:
                        const EdgeInsets.fromLTRB(14.0, 4.0, 14.0, 4.0),
                        child: Material(
                          borderRadius: BorderRadius.circular(10.0),
                          color: Colors.white.withOpacity(0.8),
                          elevation: 0.0,
                          child: Padding(
                            padding: const EdgeInsets.only(left: 12.0),
                            child: TextFormField(
                              controller: _email,
                              decoration: InputDecoration(
                                border: InputBorder.none,
                                hintText: "Email",
                                icon: Icon(Icons.email),
                              ),
                              // ignore: missing_return
                              validator: (value) {
                                if (value.isEmpty) {
                                  Pattern pattern =
                                      r'^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$';
                                  RegExp regex = new RegExp(pattern);
                                  if (!regex.hasMatch(value))
                                    return 'Please make sure your email address is valid';
                                  else
                                    return null;
                                }
                              },
                            ),
                          ),
                        ),
                      ),
                      Padding(
                        padding:
                        const EdgeInsets.fromLTRB(14.0, 4.0, 14.0, 4.0),
                        child: Material(
                          borderRadius: BorderRadius.circular(10.0),
                          color: Colors.white.withOpacity(0.8),
                          elevation: 0.0,
                          child: Padding(
                            padding: const EdgeInsets.only(left: 12.0),
                            child: ListTile(
                              title: TextFormField(
                                controller: _password,
                                obscureText: hidePass,
                                decoration: InputDecoration(
                                  border: InputBorder.none,
                                  hintText: "Password",
                                  icon: Icon(Icons.lock_outline),
                                ),
                                validator: (value) {
                                  if (value.isEmpty) {
                                    return "The password field cannot be empty";
                                  } else if (value.length < 6) {
                                    return "The password should have  at least 6 characters ";
                                  }
                                  return null;
                                },
                              ),
                              trailing: IconButton(
                                  icon: Icon(Icons.remove_red_eye),
                                  onPressed: () {
                                    setState(() {
                                      if (hidePass == false) {
                                        hidePass = true;
                                      } else {
                                        hidePass = false;
                                      }
                                    });
                                  }),
                            ),
                          ),
                        ),
                      ),
                      Padding(
                        padding:
                        const EdgeInsets.fromLTRB(14.0, 4.0, 14.0, 4.0),
                        child: Material(
                          borderRadius: BorderRadius.circular(10.0),
                          color: Colors.white.withOpacity(0.8),
                          elevation: 0.0,
                          child: Padding(
                            padding: const EdgeInsets.only(left: 12.0),
                            child: ListTile(
                              title: TextFormField(
                                controller: _confirmPassword,
                                obscureText: hidePass1,
                                decoration: InputDecoration(
                                  border: InputBorder.none,
                                  hintText: "Confirm Password",
                                  icon: Icon(Icons.lock_outline),
                                ),
                                validator: (value) {
                                  if (value.isEmpty) {
                                    return "The password field cannot be empty";
                                  } else if (value.length < 6) {
                                    return "The password should have  at least 6 characters";
                                  } else if (_password.text != value) {
                                    return "Password Don't match";
                                  }
                                  return null;
                                },
                              ),
                              trailing: IconButton(
                                  icon: Icon(Icons.remove_red_eye),
                                  onPressed: () {
                                    setState(() {
                                      if (hidePass1 == false) {
                                        hidePass1 = true;
                                      } else {
                                        hidePass1 = false;
                                      }
                                    });
                                  }),
                            ),
                          ),
                        ),
                      ),
                      Padding(
                        padding:
                        const EdgeInsets.fromLTRB(14.0, 4.0, 14.0, 4.0),
                        child: Material(
                            borderRadius: BorderRadius.circular(20.0),
                            color: Colors.blueAccent,
                            elevation: 0.0,
                            child: MaterialButton(
                              onPressed: () async {
                                _formKey.currentState.validate();
                              },
//                  async{
//                    if(_formKey.currentState.validate()){
//                      if(!await user.signIn(_email.text, _password.text))
//                        _key.currentState.showSnackBar(SnackBar(content: Text("Sign in failed")));
//                    }
//                  },
                              minWidth: MediaQuery
                                  .of(context)
                                  .size
                                  .width,
                              child: Text(
                                "Register",
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: Colors.white,
                                    fontWeight: FontWeight.bold,
                                    fontSize: 20.0),
                              ),
                            )),
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: <Widget>[
                          Padding(
                              padding: const EdgeInsets.all(6.0),
                              child: InkWell(
                                  onTap: () {
                                    Navigator.pop(context);
                                  },
                                  child: Text(
                                    "I already have an account",
                                    textAlign: TextAlign.center,
                                    style: TextStyle(
                                        color: Colors.black,
                                        fontWeight: FontWeight.bold,
                                        fontSize: 16),
                                  ))),
                        ],
                      ),
                    ],
                  )),
            ),
          ),
        ),

        Visibility(
            visible: loading ?? true,
            child: Center(
              child: Container(
                alignment: Alignment.center,
                color: Colors.white.withOpacity(0.2),
                child: CircularProgressIndicator(
                  valueColor: AlwaysStoppedAnimation<Color>(Colors.blueAccent),
                ),
              ),
            )),
      ]),

//
    );
  }

  valueChanged(e) {
    setState(() {
      if (e == "Male") {
        groupvalue = e;
        gender = e;
      } else if (e == "Female") {
        groupvalue = e;
        gender = e;
      }
    });
  }

  Future validate() async {
    FormFieldState formState = _formKey.currentState;

    if (_formKey.currentState.validate()) {
      formState.reset();
//      FirebaseUser user = await firebaseAuth.currentUser();
//      if (user == null) {
//        firebaseAuth
//            .createUserWithEmailAndPassword(
//            email: _email.text, password: _password.text)
//            .then((authResult) =>
//        {
//          _userServices.createUser(
//              user.uid,
//              {
//                "username": user.displayName,
//                "email": user.email,
//                "gender": gender,
//              }
//          )
//        }).catchError((err) => {print(err.toString())});
//        Navigator.pushReplacement(
//            context, MaterialPageRoute(builder: (context) => HomePage()));
//      }
    }
  }

}